<template>
  <div class="operationBasicsDetail">
    <div class="header">
      <van-nav-bar title="商品详情" left-arrow @click-left="handleLeft"></van-nav-bar>
    </div>

    <!-- 浮动导航栏 -->
    <div class="hmshop-floating-nav" v-if="showFloatingNav">
      <ul>
        <li @click="scrollToElement('product_detail_top')"
          :class="{ 'red-text': activeNavItem == 'product_detail_top' }">
          商品
        </li>

        <li @click="scrollToElement('product_detail_title--mechanism')"
          :class="{ 'red-text': activeNavItem == 'product_detail_title--mechanism' }">
          机制
        </li>
        <li @click="scrollToElement('product_detail_title--info')"
          :class="{ 'red-text': activeNavItem == 'product_detail_title--info' }">
          详情
        </li>

      </ul>
    </div>

    <div class="contents" @scroll="checkScrollPosition"
      :style="{ 'paddingBottom': detailInfo.auditStatus !== '-2' ? '22.4vw' : '0' }">


      <!-- 轮播 -->
      <div class="product_detail_top" id="product_detail_top">
        <div class="product_detail_top_img">
          <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
            <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
              <van-image class="product_detail_top-image" :src="image + '?x-oss-process=image/resize,w_300'" fit="cover"
                @click="enlargeImage(realSrcList, index)" />
            </van-swipe-item>
            <template #indicator="{ active, total }">
              <div class="hmshop-custom-indicator fl-box-center">{{ active + 1 }}/{{ total }}</div>
            </template>
          </van-swipe>
          <van-image :src="icon_imgNull" v-if="!realSrcList.length" fit="cover"> </van-image>

          <!-- 轮播多机制 -->
          <div v-if="hmMechanismsList?.cooperationMode" class="mechanism_mall">
          </div>
        </div>
      </div>

      <!-- 商品信息 -->
      <div class="product_detail_top_details" id="product_detail_title--details">

        <div class="product_stylename">
          <div class="product_mechanism" v-if="hmMechanismsList?.cooperationMode">多机制</div>
          <div class="styleName text-el">{{ detailInfo.styleName }}</div>
        </div>

        <!-- 69 -->
        <div class="product_box mt-10" v-if="detailInfo.stockCode || detailInfo.styleCode">
          <div class="product_fl_box">
            <div class="box_l" v-if="detailInfo.stockCode">

              <div class="l_title"><span>库存编码</span></div>
              <div class="l_code text-el ">{{ detailInfo.stockCode }}</div>
              <div class="l_copy" @click="copyClick(detailInfo.stockCode)"></div>
            </div>
            <div class="box_r" v-if="detailInfo.styleCode">
              {{ detailInfo.styleCode }}
              <div class="icon_69"></div>
            </div>

          </div>
        </div>

        <div class="product_users mt-10 b-box fl-box-s-b">
          <div class="product_users_item">
            <div class="product_users_title">招商员</div>
            <div class="product_users_text">{{ detailInfo.recruiter }}</div>

          </div>
          <div class="line"></div>
          <div class="product_users_item">
            <div class="product_users_title">招商部</div>
            <div class="product_users_text">{{ detailInfo.recruiterDept }}</div>
          </div>
        </div>



        <div class="product_id mt-10 fl-box-s-b">
          <div class="produc_left fl-box-s-b b-box">
            <span>商品编码</span>
            <span>{{ detailInfo.id }}</span>
            <span class="copy" @click="copyClick(detailInfo.id)"></span>
          </div>
          <div class="coreName fl-box" v-if="detailInfo.coreName">
            <div class="goods_r_l">{{ detailInfo.liveType }}</div>
            <div class="goods_r_r">{{ detailInfo.coreName }}</div>
          </div>
        </div>


        <div class="product_user fl-box-s-b mt-10">
          <div class="examine fl-box">
            <div class="examine_item fl-box-s-b b-box "
              :class="{ examine_y: conputedQualityLog(detailInfo.qualityLog), examine_n: !conputedQualityLog(detailInfo.qualityLog) }">
              核价初审
              <div
                :class="{ examine_img_y: conputedQualityLog(detailInfo.qualityLog), examine_img_n: !conputedQualityLog(detailInfo.qualityLog) }">
              </div>
            </div>
            <div class="examine_item fl-box-s-b b-box"
              :class="{ examine_y: detailInfo.auditStatus >= 13, examine_n: detailInfo.auditStatus < 13 }">
              核价复审
              <div :class="{ examine_img_y: detailInfo.auditStatus >= 13, examine_img_n: detailInfo.auditStatus < 13 }">
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- 轮播机制卡片 -->
      <div id="product_detail_title--mechanism">

        <mechanismCardNew :data="detailInfo.hmMechanismsList"></mechanismCardNew>
      </div>
      <!-- 商品信息 -->

      <div id="product_detail_title--info">


        <template v-for="(item, index) in infoList" :key="index">

          <messageInfo :type="index" :data="item.popData" :title="item.content"></messageInfo>
        </template>
      </div>
      <!-- <div class="info" >
        <div v-for="(item, index) in infoList" :key="index" class="info_item" @click="popClick(index, item)">
          <van-image :src="item.img" class="img"></van-image>
          <div class="title">{{ item.title }}</div>
          <van-image :src="icon_huisejiantou" class="links"></van-image>
        </div>
      </div>
      <messagePopup v-model="popShow" :type="popType" :data="popData" :title="popTitle"></messagePopup> -->
      <!-- 空白 -->
      <div class="back" v-if="detailInfo.auditStatus !== '-2'"></div>
      <!-- 底部更多等 -->
      <div class="footer" v-if="detailInfo.auditStatus !== '-2'">
        <div class="more" @click="moreClick"
          v-if="detailInfo.auditStatus && detailInfo.auditStatus !== '-1' && detailInfo.auditStatus !== '-2'">
          <div class="moreimg"></div>
          更多
        </div>
        <div :class="computAud(detailInfo.auditStatus)?.buttonright ? 'footer_left' : 'footer_lefts'"
          v-if="computAud(detailInfo.auditStatus, detailInfo.receiveStatus)?.buttonleft" v-throttle:click
          @click="audClick(computAud(detailInfo.auditStatus)?.buttonleft, detailInfo.id)">
          <template v-if="loading">
            <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
          </template>
          <template v-else>
            {{ computAud(detailInfo.auditStatus)?.buttonleft }}

          </template>
        </div>
        <div :class="computAud(detailInfo.auditStatus)?.buttonleft ? 'footer_right' : 'footer_button'"
          v-if="computAud(detailInfo.auditStatus, detailInfo.receiveStatus)?.buttonright" v-throttle:click
          @click="audClick(computAud(detailInfo.auditStatus)?.buttonright, detailInfo.id)">
          <template v-if="loading">
            <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
          </template>
          <template v-else>
            {{ computAud(detailInfo.auditStatus)?.buttonright }}
          </template>
        </div>
      </div>
      <!-- 更多弹窗 -->
      <div class="right_pop" v-if="rightPop">
        <!-- 更改主播 -->
        <div @click="anchorOnclick" class="rightPopBT"
          v-if="(detailInfo.auditStatus >= 6 && detailInfo.auditStatus < 18) || detailInfo.auditStatus == 22">
          <div class="imgbox bgzb"></div>{{
            detailInfo.auditStatus ? '变更主播' : '' }}
        </div>
        <!-- 都可编辑 -->
        <div @click="onClickRight" class="rightPopBT" v-if="handleEditPermission(detailInfo.auditStatus) == 1">
          <div class="imgbox bj"></div> 编辑
        </div>
        <div @click="goLogistics" class="rightPopBT"
          v-if="[1, 2, 4, '1', '2', '4'].includes(detailInfo.auditStatus) && detailInfo.trackingNumber">
          <div class="imgbox bj"></div>物流信息
        </div>
        <!-- 只可编辑机制 规格/材质 卖点 商品图 -->
        <div @click="onClickMechanism" class="rightPopBT" v-if="handleEditPermission(detailInfo.auditStatus) == 4">
          <div class="imgbox bj"></div>编辑
        </div>
        <!-- 编辑商品信息，除了机制 -->
        <div @click="onClickRights" class="rightPopBT" v-if="handleEditPermission(detailInfo.auditStatus) == 3">
          <div class="imgbox bj"></div>编辑
        </div>
        <!-- 只可编辑规格/材质 卖点 商品图 -->
        <div @click="onClickRightFive" class="rightPopBT" v-if="handleEditPermission(detailInfo.auditStatus) == 5">
          <div class="imgbox bj"></div>编辑
        </div>
        <!-- 已到样状态及以后都可打印条码 -->
        <div v-if="Number(detailInfo.auditStatus) >= 5" class="rightPopBT" @click="onClickComplement">
          <div class="imgbox tm"></div>打印条码
        </div>
      </div>
    </div>


    <!-- 资质送审 -->
    <van-overlay :show="qualificationsFlag" z-index="2001">
      <div class="wrapper_qualifications" @click.stop>
        <div class="wrapper_div">
          <van-image class="close" :src="colseImg" @click="qualificationsclose"></van-image>
          <div class="title">选择送审品类</div>
          <div class="describe">请为您的商品选择送审的品类</div>
          <div class="column">
            <div class="lable">可选品类</div>
            <div class="value" @click="categoryFlag = true">
              {{ categoryMessage || '请选择' }}
              <van-image :src="icon_heisexiasanjiao"></van-image>
            </div>
          </div>
          <van-popup v-model:show="categoryFlag" position="bottom">
            <van-picker title="可选品类" :columns="categoryColumns" @confirm="onConfirmCategory"
              @cancel="categoryFlag = false" />
          </van-popup>
          <div class="buttons">
            <div class="cancel" @click="qualificationsCancel">取消</div>
            <div class="save" @click="qualificationsSubmit">

              <template v-if="loading">
                <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
              </template>
              <template v-else>
                确定
              </template>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 无合同审批 -->
    <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
    <van-overlay :show="noContractApprovalFlag" z-index="6001">
      <div class="wrapper" @click.stop>
        <div class="wrapper_div">
          <van-image :src="colseImg" @click="close"></van-image>
          <div class="title">审批附言</div>
          <van-form @submit="noContractSubmit">
            <div class="label">请选择补充合同日期</div>
            <van-field v-model="suppContractDate" class="dates" readonly name="calendar" label="" placeholder="日期选择"
              @click="showCalendar = true" />
            <div class="label">审批附言</div>
            <van-field maxlength="50" show-word-limit v-model="message" rows="6" label="" type="textarea"
              placeholder="请输入审批附言" :border="false" />

            <van-button class="buttons" :loading="loading" loading-text="执行中..." round block type="primary"
              native-type="submit" v-throttle:click>
              提交确认
            </van-button>
          </van-form>
        </div>
      </div>
    </van-overlay>
    <!-- 二次确认退还供应商 -->
    <van-dialog v-model:show="dialogShow" :showConfirmButton="false">
      <div class="dialog_top">
        <van-image :src="icon_erciqueren"></van-image>
        <div class="title">确认退还</div>
        <div class="describe">
          确认将选中商品退还供应商？
        </div>
      </div>
      <div class="postscript">
        <div class="buttons">
          <div class="cancel" @click="dialogShow = false">取消</div>
          <div class="submit" @click="returnSubmit">
            <template v-if="loading">
              <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
            </template>
            <template v-else>
              确认
            </template>
          </div>
        </div>
      </div>
    </van-dialog>
    <anchorSelection :loading="loading" :isShow="isShowAnchor" @goback="goback" @onSubmit="anchorOnSubmit"
      @onChangeSubmit="onChangeSubmit" :isChange="isChangeList" :id="detailInfo.id"></anchorSelection>

    <!-- van-loading -->
    <div class="top_loading" v-if="pageloading">

      <van-loading type="spinner" size="50px" vertical> </van-loading>
    </div>
  </div>
</template>
<script setup lang="ts">
import anchorSelection from '@/components/anchorSelection/index.vue'
import { handleEditPermission } from "@/utils/auditStatusFilter";
import { computed, reactive, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getEnvValue } from "@/utils/index";
import { showImagePreview, showFailToast, showSuccessToast, showDialog } from "vant";
import { getbrandId, hmSupplierList } from "@/api/supplierList/index";
import { copyTextToClipboard } from '@/utils/index'
import { againStock } from '@/api/productHome/index.ts'
import Qs from "qs";
import { editTwo, editFour, editFive, outSupplier, reAuditSecond, editCore, editOff, editSevens, listBrand, getSupplierAddProducts, editTen, noContractAdd, changeCore } from "@/api/productList/index";
import { getSystemList } from '@/api/approval/index'
import { getInfo } from "@/api/supplierList/index";
import mechanismCardNew from '@/views/operation/product/components/mechanismCardNew.vue'
import messageInfo from './components/messageInfo.vue'
const icon_pinpaizizhi = new URL("@/assets/operation/icon_pinpaizizhi.png", import.meta.url).href;
const icon_shangpinzizhi = new URL("@/assets/operation/icon_shangpinzizhi.png", import.meta.url).href;
const icon_zhibobuchongxinxi = new URL("@/assets/operation/icon_zhibobuchongxinxi.png", import.meta.url).href;
const icon_jichuxinxi = new URL("@/assets/operation/icon_jichuxinxi.png", import.meta.url).href;
const icon_heisexiasanjiao = new URL("@/assets/productHome/icon_heisexiasanjiao.png", import.meta.url).href;
const colseImg = new URL("@/assets/approval/close.png", import.meta.url).href;
const icon_erciqueren = new URL("@/assets/operation/icon_erciqueren.png", import.meta.url).href;

const icon_imgNull = new URL("@/assets/newui/imgNull.jpg", import.meta.url).href;
const route = useRoute();
const router = useRouter();

const otherImageSUpplierList = ref<string[]>([]);

const loading = ref(false)
/** 商品id */
const uniquekey = computed(() => {
  return route.params.id;
});
/** 上级路由 */
const type = computed(() => {
  return route.query.type;
});
// 信息
const infoList = ref<any>([
  { img: icon_jichuxinxi, title: '基础信息：供应商名｜类目｜品牌｜对接群｜规格/材质｜历史最低售价', content: '基础信息' },
  { img: icon_zhibobuchongxinxi, title: '直播补充信息：发货时间｜发货地｜物流/快递｜使用人群｜厂家可用库存 ', content: '直播补充信息' },
  { img: icon_zhibobuchongxinxi, title: '供应商信息：商家类型｜商品类目｜厂家地址｜联系人｜联系电话 ', content: '供应商信息' },
  { img: icon_shangpinzizhi, title: '商品资质：商品实拍｜备案政策/许可证证件｜其他资质', content: '商品资质' },
  { img: icon_pinpaizizhi, title: '品牌资质：品牌名称｜品牌商标注册证｜商标授权使用证明', content: '品牌资质' },

])
onMounted(async () => {
  pageloading.value = true
  await getDetail()
  infoList.value.forEach(async (item, index) => {
    if (index == 4) {
      const res = await listBrand({ supplierId: detailInfo.value.supplierId });
      if (res.rows.length > 0) {
        const brandLists = res.rows.filter(
          (item: any) => item.brandName == detailInfo.value.brandName
        );
        if (brandLists.length > 0) {
          const brandInfo = await getbrandId(brandLists[0].id);
          // 品牌商标注册证
          if (brandInfo.data.brandImage) {
            brandInfo.data.brandImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.brandImage;
          }
          // 商标授权使用证明
          if (brandInfo.data.usageImage) {
            brandInfo.data.usageImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.usageImage;
          }
          // 店铺销售授权
          if (brandInfo.data.sellImage) {
            brandInfo.data.sellImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.sellImage;
          }
          // 其他补充资质
          if (brandInfo.data.otherImage) {
            brandInfo.data.otherImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.otherImage;
          }
          // 联名款/其他授权
          if (brandInfo.data.jointlyImage) {
            brandInfo.data.jointlyImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.jointlyImage;
          }
          item.popData = brandInfo.data;
          item.popData.brandName = detailInfo.value.brandName

        } else {
          item.popData = {};
          item.popData.brandName = detailInfo.value.brandName
        }
      } else {
        item.popData = {};
        item.popData.brandName = detailInfo.value.brandName
      }
    } else if (index == 2) {
      const response = await hmSupplierList({ id: detailInfo.value.supplierId });
      if (response.rows[0]?.otherImage) {
        const real_src = response.rows[0].otherImage.split(",");
        fetchImagesSequentially(real_src, otherImageSUpplierList.value);
        response.rows[0].otherImageSUpplier = otherImageSUpplierList.value
      }
      if (response.rows[0] && response.rows[0].businessImage) {
        response.rows[0].businessImageSupplier = getEnvValue("VITE_APP_PIC_URL") + response.rows[0].businessImage;
      }
      item.popData = response.rows[0]
    } else {
      item.popData = detailInfo.value
    }
  });
  pageloading.value = false
})
// 更改主播信息
const isChangeList = ref()
// 主播选品
const isShowAnchor = ref(false)
// 机制1
const hmMechanismsList = ref<any>()
const detailInfo = ref<any>({});
// 更多弹窗
const rightPop = ref(false)
// 资质审核显隐
const qualificationsFlag = ref(false)
// 资质审核可选品类值
const categoryMessage = ref()
// 资质审核可选品类id
const categoryId = ref()
// 资质审核可选品类显隐
const categoryFlag = ref(false)
// 资质审核可选品类column
const categoryColumns = ref([])
// 无合同补充合同日期
const suppContractDate = ref('');
// 无合同日期筛选显隐
const showCalendar = ref(false);
// 无合同审批附言
const message = ref('')
// 无合同审批显隐
const noContractApprovalFlag = ref(false)

// 部门名称
const deptName = ref()


const realSrcList = ref<string[]>([]);
const voucherImageList = ref<string[]>([]);
const customsDeclarationImageList = ref<string[]>([]);
const customsInformationImageList = ref<string[]>([]);
const customsInspectionImageList = ref<string[]>([]);
const customsTestReportImgaeList = ref<string[]>([]);
const otherImageList = ref<string[]>([]);

// 退还弹窗
const dialogShow = ref(false)
//页面加载loading
const pageloading = ref(false)


/** 不同状态对应的按钮以及样式 */
const buttonList = reactive([
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "已邮寄",
    buttonrightAvator: '',
    buttonrightColor: "",
    buttonrightAvatorBackgroundColor: '',
    status: '0',
  },
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "待收货",
    buttonrightAvator: '',
    buttonrightColor: "",
    buttonrightAvatorBackgroundColor: '',
    status: '1',
  },
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "确认收货",
    buttonrightAvator: '',
    buttonrightColor: "",
    buttonrightAvatorBackgroundColor: '',
    status: '2',
  },
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "修改机制",
    buttonrightAvator: '',
    buttonrightColor: "",
    buttonrightAvatorBackgroundColor: '',
    status: '3',
  },
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#19D11B',

    buttonright: "上架",
    buttonrightAvator: '',
    buttonrightColor: "",
    buttonrightAvatorBackgroundColor: '',
    status: '4',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "主播选品",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '5',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "发起初审",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '6',
  },
  {
    buttonleft: "下架",
    buttonleftAvator: '',
    buttonleftColor: '',
    buttonleftBackgroundColor: '',

    buttonright: "",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '7',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "发起初审",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '8',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "发起初审",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '9',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "发起初审",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '10',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '11',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "价格复审",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '12',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "无合同审批",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '13',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "入库",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '14',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "入库",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '15',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '16',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "重新入库",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '17',
  },
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "变价审核",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '18',
  },
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '19',
  },
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "变价审核",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '20',
  },
  {
    buttonleft: "",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "变价审核",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '21',
  },
  {
    buttonleft: "下架",
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#0094FF',

    buttonright: "",
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '22',
  },
  {
    buttonleft: "退还",
    buttonleftAvator: new URL("@/assets/porduct/listing.png", import.meta.url).href,
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#19D11B',

    buttonright: "上架",
    buttonrightAvator: new URL("@/assets/porduct/removeShelves.png", import.meta.url).href,
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '-1',
  },
  {
    buttonleft: "",
    buttonleftAvator: new URL("@/assets/porduct/listing.png", import.meta.url).href,
    buttonleftColor: '#fff',
    buttonleftBackgroundColor: '#19D11B',

    buttonright: "",
    buttonrightAvator: new URL("@/assets/porduct/removeShelves.png", import.meta.url).href,
    buttonrightColor: "#fff",
    buttonrightAvatorBackgroundColor: '#FC2540',
    status: '-2',
  },
]);

/** 设置不同状态回显文字 */
const computAud: any = (auditStatus: string, receiveStatus?: any) => {
  if (receiveStatus == 0 && auditStatus == '13') {
    return {
      buttonleft: "下架",
      buttonleftColor: '#fff',
      buttonleftBackgroundColor: '#0094FF',

      buttonright: "",
      buttonrightColor: "#fff",
      buttonrightAvatorBackgroundColor: '#FC2540',
      status: '13',
    }
  } else {
    const match = buttonList.find(
      (element) => element.status == auditStatus
    );
    return match; // 如果找到匹配项，返回其 button
  }
};
/** 点击事件 */
const audClick = async (title: string, id: string) => {
  if (title == '已邮寄') {
    router.push(`/orderNumber/${id}`);
  } else if (title == '已到样') {
    loading.value = true
    try {
      await editTwo({ id: id });
      loading.value = false
      showSuccessToast({ type: "success", message: "商品到样确认成功" });
      clearImgs();
      getDetail();
    } catch (error) {
      if (error == 'timeout') {
        showFailToast('商品到样确认失败');
      }
      loading.value = false
    }
  } else if (title == '确认收货') {
    loading.value = true
    try {
      await editFour(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
      loading.value = false
      showSuccessToast({ type: "success", message: "商品确认收货成功" });
      clearImgs();
      getDetail();
    } catch (error) {
      if (error == 'timeout') {
        showFailToast('商品确认收货失败');
      }
      loading.value = false
    }
  } else if (title == "修改机制") {
    router.push({
      path: `/editProduct/${uniquekey.value}`,
      query: { type: "type" },
    });
  } else if (title == '发起初审') {
    if (deptName.value != '食品部' && deptName.value != '鞋帽部' && deptName.value != '百货部' && deptName.value != '酒茶部' && deptName.value != '箱包部' && deptName.value != '服装部') {
      qualificationsFlag.value = true
    } else {
      loading.value = true
      try {
        // 商品初审
        await editSevens({ ids: [id] })
        loading.value = false
        showSuccessToast({ type: "success", message: "商品送审成功" });
        clearImgs();
        getDetail();
      } catch (error) {
        if (error == 'timeout') {
          showFailToast('商品送审失败');
        }
        loading.value = false
      }
    }
  } else if (title == '上架') {
    loading.value = true
    try {
      await editFive(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
      loading.value = false
      showSuccessToast({ type: "success", message: "商品上架成功" });
      clearImgs();
      getDetail();
    } catch (error) {
      if (error == 'timeout') {
        showFailToast('商品上架失败');
      }
      loading.value = false
    }
  } else if (title == '主播选品') {
    isShowAnchor.value = true
  } else if (title == '下架') {
    loading.value = true
    try {
      await editOff(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
      loading.value = false
      showSuccessToast({ type: "success", message: "商品下架成功" });
      clearImgs();
      getDetail();
    } catch (error) {
      if (error == 'timeout') {
        showFailToast('商品下架失败');
      }
      loading.value = false
    }
  } else if (title == '退还') {
    dialogShow.value = true
  } else if (title == '价格复审') {
    // 商品二审
    loading.value = true
    try {
      await reAuditSecond({ id: id })
      loading.value = false
      showSuccessToast({ type: "success", message: "商品送审成功" });
      clearImgs();
      getDetail();
    } catch (error) {
      if (error == 'timeout') {
        showFailToast('商品送审失败');
      }
      loading.value = false
    }
  } else if (title == '无合同审批') {
    // 无合同审批
    noContractApprovalFlag.value = true
  } else if (title == '入库') {
    // 无合同驳回时
    if (detailInfo.value.auditStatus == 14) {
      if (detailInfo.value.sellStatus == "已签署") {
        // 入库
        loading.value = true
        try {
          await editTen(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
          loading.value = false
          showSuccessToast({ type: "success", message: "产品入库中" });
          clearImgs();
          getDetail();
        } catch (error) {
          if (error == 'timeout') {
            showFailToast('产品入库失败');
          }
          loading.value = false
        }
      } else if (detailInfo.value.bigBrandStatus == "1" && detailInfo.value.sellStatus == "未签署") {
        // 入库
        loading.value = true
        try {
          await editTen(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
          loading.value = false
          showSuccessToast({ type: "success", message: "产品入库中" });
          clearImgs();
          getDetail();
        } catch (error) {
          if (error == 'timeout') {
            showFailToast('产品入库失败');
          }
          loading.value = false
        }
      } else {
        showDialog({
          title: "无法入库",
          message: "当前商品暂无供销合同，请关注供销合同上传或无合同审批进展...",
        });
      }
    } else {
      // 入库
      loading.value = true
      try {
        await editTen(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
        loading.value = false
        showSuccessToast({ type: "success", message: "产品入库中" });
        clearImgs();
        getDetail();
      } catch (error) {
        if (error == 'timeout') {
          showFailToast('产品入库失败');
        }
        loading.value = false
      }
    }
  } else if (title === '重新入库') {
    // 重新入库
    loading.value = true
    try {
      await againStock({ id: id });
      loading.value = false
      showSuccessToast({ type: "success", message: "产品重新入库中" });
      clearImgs();
      getDetail();
    } catch (error) {
      if (error == 'timeout') {
        showFailToast('产品重新入库失败');
      }
      loading.value = false
    }
  } else if (title == '变价审核') {
    router.push({
      path: '/mechanismPriceChange',
      query: {
        id: id
      }
    });
  }
}
/** 退还供应商 */
const returnSubmit = async () => {
  loading.value = true
  try {
    await outSupplier({ ids: [detailInfo.value.id] })
    loading.value = false
    showSuccessToast({ type: "success", message: "商品退还成功" });
    dialogShow.value = false
    clearImgs();
    getDetail();
  } catch (error) {
    if (error == 'timeout') {
      showFailToast('新增供应商失败');
    }
    loading.value = false
  }
}
/** 主播返回 */
const goback = () => {
  isShowAnchor.value = false
  isChangeList.value = undefined
}
/** 选品主播提交 */
const anchorOnSubmit = async (coreId: string, coreName: string, sessionIndex: string, coreDeptId: string) => {
  loading.value = true
  try {
    await editCore({
      id: detailInfo.value.id,
      coreId,
      coreName,
      liveType: sessionIndex,
      coreDeptId
    });
    loading.value = false
    showSuccessToast({ type: "success", message: "主播选品成功" });
    isShowAnchor.value = false
    clearImgs();
    getDetail();
  } catch (error) {
    if (error == 'timeout') {
      showFailToast('主播选品失败');
    }
    loading.value = false
  }
}
/** 选品主播更改 */
const onChangeSubmit = async (liveType: string, coreDeptId: string) => {
  loading.value = true
  try {
    await changeCore({
      id: detailInfo.value.id,
      liveType,
      coreDeptId
    });
    showSuccessToast({ type: "success", message: "主播更改成功" });
    loading.value = false
    isShowAnchor.value = false
    isChangeList.value = undefined
    clearImgs();
    getDetail();
  } catch (error) {
    if (error == 'timeout') {
      showFailToast('主播更改失败');
    }
    loading.value = false
  }
}
/** 补充合同日期 */
const onConfirm = (date) => {
  suppContractDate.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  showCalendar.value = false;
};
/** 无合同审批关闭 */
const close = () => {
  noContractApprovalFlag.value = false
}
/** 无合同审批提交 */
const noContractSubmit = async () => {
  if (!suppContractDate.value) {
    showFailToast({ message: "请选择补充合同日期", teleport: '.wrapper_div' });
  } else if (!message.value) {
    showFailToast({ message: "请输入审批附言", teleport: '.wrapper_div' });
  } else {
    // 无合同审批
    loading.value = true
    try {
      await noContractAdd({ productsId: detailInfo.value.id, supplementTime: suppContractDate.value, recruiterRemark: message.value, auditDeptId: '' })
      showSuccessToast({ type: 'success', message: '无合同审批提交成功', teleport: '.wrapper_div' });
      noContractApprovalFlag.value = false
      loading.value = false
      suppContractDate.value = ''
      message.value = ''
      clearImgs();
      getDetail();
    } catch (error) {
      if (error == 'timeout') {
        showFailToast('无合同审批提交失败');
      }
      loading.value = false
    }
  }
}

/** 清空所有图片 */
const clearImgs = () => {
  realSrcList.value = [];
  voucherImageList.value = [];
  customsDeclarationImageList.value = [];
  customsInformationImageList.value = [];
  customsInspectionImageList.value = [];
  customsTestReportImgaeList.value = [];
  otherImageList.value = [];
};
/** 资质送审关闭 */
const qualificationsclose = () => {
  qualificationsFlag.value = false
}
const categoryMap = {
  '鞋帽': '1',
  '酒茶': '2',
  '箱包': '3',
  '百货': '4',
  '服装': '5',
  '食品': '6'
}
/** 可选品类column */
const getcategoryColumns = async () => {
  const res = await getSystemList({ parentId: '1796913597400784898' })
  if (res.data.length) {
    // 去掉惠麦优选部门
    const response = res.data.filter(item => item.deptName !== '惠麦优选')
    response.forEach(item => {
      item.text = item.deptName
      Object.keys(categoryMap).forEach(key => {
        if (item.deptName.includes(key)) {
          item.value = categoryMap[key];
          return;
        }
      });
    })
    categoryColumns.value = response
  }
}
getcategoryColumns()
/** 可选品类筛选 */
const onConfirmCategory = ({ selectedOptions }) => {
  categoryMessage.value = selectedOptions[0]?.text;
  categoryId.value = selectedOptions[0]?.value;
  categoryFlag.value = false
}
/** 可选品类取消 */
const qualificationsCancel = async () => {
  categoryMessage.value = ''
  qualificationsFlag.value = false
}
/** 可选品类提交 */
const qualificationsSubmit = async () => {
  if (!categoryMessage.value) {
    showFailToast({ message: "请选择可选品类", teleport: '.wrapper_div' });
  } else {
    // 商品预审
    loading.value = true
    try {
      await editSevens({ ids: [detailInfo.value.id], productType: categoryId.value })
      showSuccessToast({ type: "success", message: "商品送审成功" });
      qualificationsFlag.value = false
      loading.value = false
      categoryMessage.value = ''
      clearImgs();
      getDetail();
    } catch (error) {
      if (error == 'timeout') {
        showFailToast('商品送审失败');
      }
      loading.value = false
    }
  }
}

/** 更多点击事件 */
const moreClick = () => {
  rightPop.value = !rightPop.value
}
/** 更改主播 */
const anchorOnclick = () => {
  isChangeList.value = {
    coreName: detailInfo.value.coreName,
    coreId: detailInfo.value.coreDeptId,
    liveType: detailInfo.value.liveType
  }
  isShowAnchor.value = true
}
/** 编辑 */
const onClickRight = () => {
  router.push(`/editProduct/${uniquekey.value}`);
};
/** 编辑只可编辑机制 规格/材质 卖点 商品图 */
const onClickMechanism = () => {
  router.push({
    path: `/editProduct/${uniquekey.value}`,
    query: {
      mechanism: 'mechanism'
    }
  });
}
/** 编辑商品信息，除了机制*/
const onClickRights = () => {
  router.push({
    path: `/editProduct/${uniquekey.value}`,
    query: {
      correctMechanism: 'correctMechanism'
    }
  });
}
/** 只可编辑规格/材质 卖点 商品图 */
const onClickRightFive = () => {
  router.push({
    path: `/editProduct/${uniquekey.value}`,
    query: {
      fiveMechanism: 'fiveMechanism'
    }
  });
}
/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
  for (const item of real_src) {
    if (item) {
      const url = getEnvValue("VITE_APP_PIC_URL") + item
      list.push(url);
    }
  }
};
/** 获取详情 */
const getDetail = async () => {
  // 用于修改状态后按钮隐藏 解决商品多次点击问题
  detailInfo.value.auditStatus = ''
  const res = await getSupplierAddProducts(uniquekey.value as any);

  // 根据供应商id获取供应商详情
  const response = await hmSupplierList({ id: res.data.supplierId });
  if (response.rows[0] && response.rows[0].businessImage) {
    res.data.businessImage = getEnvValue("VITE_APP_PIC_URL") + response.rows[0].businessImage;
  }

  if (res.data.productImage) {
    const real_src = res.data.productImage.split(",");
    fetchImagesSequentially(real_src, realSrcList.value);
    res.data.productImages = realSrcList.value
  }
  if (res.data.voucherImage) {
    const img1 = res.data.voucherImage.split(",");
    fetchImagesSequentially(img1, voucherImageList.value);
    res.data.voucherImages = voucherImageList.value
  }
  if (res.data.customsDeclarationImage) {
    const img2 = res.data.customsDeclarationImage.split(",");
    fetchImagesSequentially(img2, customsDeclarationImageList.value);
    res.data.customsDeclarationImages = customsDeclarationImageList.value
  }
  if (res.data.customsInformationImage) {
    const img3 = res.data.customsInformationImage.split(",");
    fetchImagesSequentially(img3, customsInformationImageList.value);
    res.data.customsInformationImages = customsInformationImageList.value
  }
  if (res.data.customsInspectionImage) {
    const img4 = res.data.customsInspectionImage.split(",");
    fetchImagesSequentially(img4, customsInspectionImageList.value);
    res.data.customsInspectionImages = customsInspectionImageList.value
  }
  if (res.data.customsTestReportImgae) {
    const img5 = res.data.customsTestReportImgae.split(",");
    fetchImagesSequentially(img5, customsTestReportImgaeList.value);
    res.data.customsTestReportImgaes = customsTestReportImgaeList.value
  }
  if (res.data.otherImage) {
    const img6 = res.data.otherImage.split(",");
    fetchImagesSequentially(img6, otherImageList.value);
    res.data.otherImages = otherImageList.value
  }

  detailInfo.value = res.data;
  hmMechanismsList.value = res.data.hmMechanismsList[1]


  const data = await getInfo()
  deptName.value = data.data.user.dept.deptName
}
// getDetail()

/** 补码跳转 */
const onClickComplement = () => {
  //  69码
  let styleCode = detailInfo.value.id;
  // 价格
  let price =
    detailInfo.value.hmMechanismsList[0].cooperationMode == "分佣"
      ? detailInfo.value.hmMechanismsList[0].price
      : detailInfo.value.hmMechanismsList[0].costPrice;
  // 佣金
  let commission =
    detailInfo.value.hmMechanismsList[0].cooperationMode == "分佣"
      ? detailInfo.value.hmMechanismsList[0].commission + "%"
      : "";
  // 机制
  let liveStreamingMechanism = detailInfo.value.hmMechanismsList[0].liveStreamingMechanism;
  // 商品名
  let styleName =
    detailInfo.value.styleName.length > 18
      ? detailInfo.value.styleName.substr(0, 18)
      : detailInfo.value.styleName;
  // 品牌名
  var brandName = detailInfo.value.brandName ? detailInfo.value.brandName : "";
  if (brandName.length > 18) {
    brandName = brandName.substr(0, 18);
  }
  // 上架时间
  let listingTime = detailInfo.value.shoppingTime ? "上架时间:" + detailInfo.value.shoppingTime : '上架时间:';
  // 规格/材质
  const gecs = detailInfo.value.specs ? detailInfo.value.specs : '';
  const specs = gecs.length > 190 ? gecs.substring(0, 190) : gecs
  let specsing =
    "规格/材质:" + specs;
  // 卖点
  let sellingPoint = "卖点:" + detailInfo.value.sellingPoints;
  //招商元姓名
  let recruiter = '招商:' + detailInfo.value.recruiter
  const arr: Array<string> = [];
  if (detailInfo.value.hmMechanismsList.length > 0) {
    detailInfo.value.hmMechanismsList.forEach((item, index) => {
      if (item.cooperationMode) {
        const obj = {
          title: index == 0 ? '机制一:' : index == 1 ? '机制二:' : '机制三:',
          number: item.cooperationMode == '分佣' ? `${item.price || 0.00}` : `${item.costPrice || 0.00}`,
          commission: item.cooperationMode == '分佣' ? `${item.commission || 0.00}%` : '',
          brokerage: item.cooperationMode == '分佣' ? `+${item.brokerage || 0.00}%` : '',
          liveStreamingMechanism: index == 0 ? item.liveStreamingMechanism || '' : item.liveStreamingMechanism.substring(0, 8) || ''
        }
        arr.push(obj.title)
        arr.push(obj.number)
        arr.push(obj.commission)
        arr.push(obj.brokerage)
        arr.push(obj.liveStreamingMechanism)
      }
    })
  }

  (window as any).uni.navigateTo({
    url: `/pages/print/index?barCode=${encodeURIComponent(
      styleCode
    )}&num1=${encodeURIComponent(price)}&num2=${encodeURIComponent(
      commission
    )}&num3=${encodeURIComponent(
      liveStreamingMechanism
    )}&name=${encodeURIComponent(styleName)}&brand=${encodeURIComponent(
      brandName
    )}&listingTime=${encodeURIComponent(
      listingTime
    )}&recruiter=${encodeURIComponent(
      recruiter
    )}&specsing=${encodeURIComponent(
      specsing
    )}&mechanismList=${encodeURIComponent(
      arr.join(',')
    )}&sellingPoint=${encodeURIComponent(sellingPoint)}&page=1&from=merchants`,
  });
};

/** 返回区分不同地址 */
const handleLeft = () => {
  if (type.value == 'investmentSelection') {
    router.push({
      path: '/investmentSelection',
    })
  } else {
    router.back();
  }
};
/** 图片放大 */
const enlargeImage = (data: any, index: number) => {
  showImagePreview({
    images: data,
    startPosition: index,
  });
};
/** 复制 */
const copyClick = (title: string) => {
  copyTextToClipboard(title)
}
/** 
 * 是否核价初审样式
 */
const conputedQualityLog = (qualityLog: any) => {
  if (qualityLog) {
    if (!qualityLog.length) {
      return false
    } else if (qualityLog.length) {
      // 审核通过
      if (qualityLog[0].firstStatus == 11) {
        return true
      } else {
        return false
      }
    }
  } else {
    return false
  }
}
/** 
 * 是否核价复审样式
 */
// const conputedPricingLog = (pricingLog: any) => {
//   if (pricingLog) {
//     if (!pricingLog.length) {
//       return false
//     } else if (pricingLog.length) {
//       // 审核通过
//       if (pricingLog[0].auditStatus == 13) {
//         return true
//       } else {
//         return false
//       }
//     }
//   } else {
//     return false
//   }
// }

/**
 * 跳转物流轨迹页面
 * */
const goLogistics = () => {
  router.push({
    path: '/logisticsTrajectory',
    query: {
      id: detailInfo.value.id,
      shippingCompany: detailInfo.value.shippingCompany,
      trackingNumber: detailInfo.value.trackingNumber,
      logisticsType: detailInfo.value.logisticsType
    }
  })
};
// 是否显示浮动导航栏
const showFloatingNav = ref(false);
const activeNavItem = ref("");
const scrollToElement = (elementId: string) => {
  const topOffsetHeight: any = (document.querySelector("#product_detail_top") as any).offsetHeight;

  const mechanismOffsetHeight: any = (document.querySelector("#product_detail_title--mechanism") as any).offsetHeight;

  const firstscoll = topOffsetHeight - 40 + (document.querySelector("#product_detail_title--details") as any).offsetHeight
  const secondscoll = firstscoll + mechanismOffsetHeight

  switch (elementId) {
    case "product_detail_top":
      goScrollTo(0)
      break;
    case "product_detail_title--mechanism":
      goScrollTo(firstscoll)
      break;
    case "product_detail_title--info":
      goScrollTo(secondscoll)
      break;
    default:
      return; // 如果没有匹配的 elementId，直接返回
  }

};

const goScrollTo = (scrollTo) => {
  const el = document.querySelector(".contents");
  const scrollNow = el!.scrollTop;

  if (scrollNow == scrollTo) {
    return;
  } else {
    el?.scrollTo({ top: scrollTo, behavior: "smooth" })
  }

}
const checkScrollPosition = (event) => {

  // 滚动条距离顶部的距离
  const scrollTop = event?.target.scrollTop;
  // 计算商品内容区域的位置
  const productTopOffset =
    document.getElementById("product_detail_top")?.offsetTop || 0;

  // topOffsetHeight ==> 盒子高度   offsetTop ==> 盒子距离顶部距离
  const topOffsetHeight: any = (document.querySelector("#product_detail_top") as any).offsetHeight + (document.querySelector("#product_detail_title--details") as any).offsetHeight;

  const mechanismOffsetHeight: any = (document.querySelector("#product_detail_title--mechanism") as any).offsetHeight;

  const heng: any = 0;


  const firstscoll = topOffsetHeight - 40
  const secondscoll = firstscoll + heng
  const thirdscoll = secondscoll + mechanismOffsetHeight + heng
  // 判断滚动位置，设置活动导航项

  if (scrollTop >= 0 && scrollTop < firstscoll) {
    activeNavItem.value = "product_detail_top";
  } else if (scrollTop >= firstscoll && scrollTop < secondscoll) {
    activeNavItem.value = "product_detail_title";
  } else if (scrollTop >= secondscoll && scrollTop < thirdscoll) {
    activeNavItem.value = "product_detail_title--mechanism";
  } else {
    activeNavItem.value = "product_detail_title--info";
  }

  // 根据具体的滚动位置设定条件
  showFloatingNav.value = scrollTop > productTopOffset;
  // showToTopButton.value = scrollTop > 100; // 显示回到顶部按钮条件，例如滚动超过100px
};
</script>
<script lang="ts">
export default { name: 'productDetail' }
</script>
<style lang="less" scoped>
:deep(.van-cell) {
  padding: 0 !important;
}

:deep(.van-field__control) {
  background: #F6FAFF !important;
  border-radius: 5px;
}

:deep(.van-field__error-message) {
  position: absolute !important;
  bottom: 0px;
}

:deep(.van-field__word-limit) {
  font-weight: 400;
  font-size: 12px !important;
  color: #8492AD !important;
}

.operationBasicsDetail {
  width: 100%;
  height: 100vh;
  background: #FFFFFF;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
  align-content: flex-start;

  .header {
    background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
    filter: blur(0px);
    height: 90px;
    padding-top: 44px;
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    z-index: 6003;

    :deep(.van-icon-arrow-left) {
      color: #1a1b1c !important;
    }

    :deep(.van-nav-bar) {
      background: none !important;
    }

    :deep(.van-nav-bar__content) {
      background-color: transparent !important;
    }
  }

  .contents {
    width: 100%;
    height: calc(100% - 0px);
    overflow: auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;
    padding-top: 90px;
    background: #F6FAFF;
    overflow-y: scroll;
  }

  .pop_content {
    width: 100%;
    height: auto;
    position: fixed;
    z-index: 999;

    .launch_div {
      padding: 0px 10px 0 10px;
      box-sizing: border-box;
      padding-top: 90px;

      .buttons {
        font-size: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        width: 100%;
        margin-top: 10px;

        .cancel {
          width: 162px;
          height: 44px;
          border-radius: 23px;
          border: 1px solid #1A1B1C;
          background-color: #fff;
          color: #000;
          font-size: 14px;
          color: #1A1B1C;
          line-height: 44px;
          text-align: center;
        }

        .save {
          width: 162px;
          height: 44px;
          background: #0094FF;
          border-radius: 23px;
          color: #FFFFFF;
          font-size: 14px;
          line-height: 44px;
          text-align: center;
        }
      }

      .launch_title {
        font-size: 14px;
        line-height: 40px;
        color: #1A1B1C;
      }

      .pop_div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;

        .pop_div_out {
          width: 25%;
          min-width: 78px;
          display: flex;
          justify-content: center;
          height: 30px;
          border-radius: 15px;
          line-height: 30px;
          font-size: 14px;
          margin-bottom: 15px;
        }

        .pop_div_item {
          width: 78px;
          display: flex;
          justify-content: center;
          height: 30px;
          border-radius: 15px;
          line-height: 30px;
          font-size: 12px;
        }
      }
    }
  }


  .product_detail_top {
    width: 100%;
    border-radius: 3px;
    height: 50%;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    height: auto;

    &_img {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;

      img {
        width: 200px;
        height: 200px;
      }

      :deep(.van-swipe) {
        width: 200px;
        height: 200px;
      }

      :deep(.van-image) {
        width: 200px;
        height: 200px;
      }
    }

    .product_detail_top_img {
      width: 375px;
      height: 320px;
      position: relative;
    }

    .van-swipe-item {
      width: 375px !important;
      height: 320px !important;

      .van-image {
        width: 375px;
        height: 320px;
      }
    }

    .van-swipe {
      width: 375px;
      height: 320px;
    }

    .van-image {
      width: 375px;
      height: 320px;
    }
  }

  .product_detail_top_details {
    width: 100%;
    box-sizing: border-box;
    padding: 17px 15px 10px;
    background-color: #fff;

    .product_stylename {
      font-weight: 600;
      font-size: 18px;
      color: #1A1B1C;
      display: flex;
      align-items: center;

      .styleName {
        width: 0;
        flex: 1;
        margin-left: 10px;
      }

      .product_mechanism {
        width: 56px;
        height: 22px;
        background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
        border-radius: 5px;
        font-weight: 500;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        line-height: 22px;
      }
    }

    .product_box {

      position: relative;

      .product_fl_box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .box_l {
          display: flex;
          align-items: center;
          height: 30px;
          background: #EBF4FF;
          border-radius: 5px;
          margin-right: 7px;

          .l_title {
            width: 85px;
            height: 30px;
            background: url("@/assets/newui/details/icon_kucunbianma@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-weight: 500;
            font-size: 14px;
            color: #3F68DB;
            line-height: 14px;
            text-align: center;
            line-height: 30px;

            span {
              display: inline-block;
              transform: translateX(-4px);
            }
          }

          .l_code {
            font-weight: 500;
            font-size: 14px;
            color: #3F68DB;
            line-height: 14px;
            margin-left: 10px;
            max-width: 70px;
          }

          .l_copy {
            width: 15px;
            height: 15px;
            margin: 0 10px;
            background: url("@/assets/newui/details/icon_kucunbianmacopy@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        .box_r {
          width: 0px;
          flex: 1;
          height: 30px;
          background: #EBF4FF;
          border-radius: 5px 0px 5px 5px;
          text-align: center;
          position: relative;
          font-weight: 500;
          font-size: 14px;
          color: #3F68DB;
          line-height: 30px;

          .icon_69 {
            position: absolute;
            width: 49px;
            height: 16px;
            background: url("@/assets/newui/details/icon_69ma@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            right: 0;
            top: -16px;
          }
        }
      }
    }

    .product_id {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #825C2A;
      line-height: 12px;

      .produc_left {
        width: 210px;
        height: 20px;
        background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
        border-radius: 5px;
        padding: 0 5px;

        .copy {
          width: 12px;
          height: 12px;
          background: url("@/assets/newui/details/icon_zongsefuzhi@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      .coreName {
        width: 0px;
        flex: 1;
        margin-left: 5px;
        height: 20px;
        background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
        border-radius: 5px;
        align-items: center;

        .goods_r_l {
          width: 34px;
          height: 20px;
          border-radius: 5px;
          border: 1px solid;
          text-align: center;
          line-height: 20px;
        }

        .goods_r_r {
          width: 0;
          flex: 1;
          text-align: center;
        }
      }

    }

    .product_user {
      width: 100%;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #8492AD;

      .van-image {
        width: 14px;
        height: 14px;
        margin-left: 10px;
      }

      .display {
        display: flex;
        align-items: center;
      }

    }

    .product_user {
      width: 100%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      line-height: 12px;

      .examine {
        align-items: center;


        .examine_item {
          width: 85px;
          height: 22px;
          border-radius: 5px;
          margin-right: 15px;
          padding: 0 10px;

          .examine_img_y {
            width: 12px;
            height: 12px;
            background: url("@/assets/newui/productList/icon_lvseduihao@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .examine_img_n {
            width: 12px;
            height: 12px;
            background: url("@/assets/newui/productList/icon_hongsecha@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        .examine_y {
          background: #E7FDEE;
          color: #19D11B;
        }

        .examine_n {
          background: #FDE7E7;
          color: #FC2540;
        }

        .examine_items {
          width: 68px;
          height: 22px;
          background: #E3E5E8;
          border-radius: 13px;
          text-align: center;
          line-height: 22px;
          font-weight: 500;
          font-size: 12px;
          color: #8492AD;
        }
      }

    }

    .product_users {
      width: 345px;
      height: 65px;
      background: #F7F7F7;
      border-radius: 5px;

      .line {
        width: 1px;
        height: 25px;
        background-color: #ECECF2;
      }

      .product_users_item {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #8492AD;
        line-height: 14px;
        width: 0;
        flex: 1;
        text-align: center;

        .product_users_text {
          font-weight: 500;
          font-size: 14px;
          color: #1A1B1C;
          line-height: 14px;
          margin-top: 11px;
        }
      }
    }

  }

  .info {
    margin-top: 20px;
    width: 345px;

    .info_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      .img {
        width: 16px;
        height: 16px;
      }

      .title {
        font-weight: 400;
        font-size: 14px;
        color: #8492AD;
        width: calc(100% - 30px);
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .links {
        width: 7px;
        height: 12px;
      }
    }
  }

  .back {
    background: #F6FAFF;
    width: 100%;
    height: 10px;
  }

  .footer {
    width: 100%;
    height: 84px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
    box-sizing: border-box;
    padding: 0 15px 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;

    .more {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 400;
      font-size: 12px;
      color: #0094FF;
      line-height: 12px;
      margin-right: 30px;
      flex-shrink: 0;

      .moreimg {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
        background: url("@/assets/newui/details/icon_gengduo.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;

      }
    }


    .footer_left {
      width: 0;
      flex: 2;
      height: 44px;
      border-radius: 5px;
      border: 1px solid #0094FF;
      text-align: center;
      line-height: 44px;
      font-weight: 400;
      font-size: 16px;
      color: #0094FF;
      margin-right: 20px;
    }

    .footer_right {
      width: 0px;
      flex: 3;
      height: 44px;
      background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
    }

    .footer_lefts {
      width: 280px;
      height: 44px;
      border: 1px solid #5FBBFF;
      border-radius: 23px;
      text-align: center;
      line-height: 44px;
      font-weight: 500;
      font-size: 16px;
      color: #0094FF;
    }

    .footer_button {
      width: 0px;
      flex: 3;
      height: 44px;
      background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
    }
  }

  .right_pop {
    position: fixed;
    bottom: 70px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
    border-radius: 5px;
    left: 15px;
    font-weight: 400;
    font-size: 14px;
    color: #0094FF;
    box-sizing: border-box;
    padding: 20px 15px;


    .rightPopBT {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .imgbox {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }

      .bj {
        background: url("@/assets/newui/details/icon_bianji.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;

      }

      .tm {
        background: url("@/assets/newui/details/icon_dayintiaoma.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .bgzb {
        background: url("@/assets/newui/details/icon_genghuanzhubo.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .wrapper_qualifications {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
      width: 315px;
      height: 280px;
      background-color: #fff;
      border-radius: 5px;
      position: relative;
      box-sizing: border-box;
      padding: 0 15px;

      .close {
        width: 10px;
        height: 10px;
        position: absolute;
        right: 18px;
        top: 18px;
      }

      .describe {
        font-weight: 400;
        font-size: 14px;
        color: #8492AD;
        margin-bottom: 10px;
      }

      .title {
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
        width: 100%;
        text-align: center;
        margin: 30px 0 20px 0;
      }

      .column {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;


        .lable {
          font-weight: 400;
          font-size: 14px;
          color: #1A1B1C;

        }

        .value {
          width: 214px;
          height: 36px;
          background: #F2F3F5;
          border-radius: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 400;
          font-size: 14px;
          color: #1A1B1C;
          box-sizing: border-box;
          padding: 0 15px;

          .van-image {
            width: 10px;
            height: 6px;
          }
        }
      }

      .buttons {
        width: 285px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        line-height: 44px;
        position: absolute;
        bottom: 10px;

        .cancel {
          width: 135px;
          height: 44px;
          border-radius: 23px;
          border: 1px solid #0094FF;
          font-weight: 400;
          font-size: 16px;
          color: #0094FF;
        }

        .save {
          width: 135px;
          height: 44px;
          background: #0094FF;
          border-radius: 23px;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
        }
      }

    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
      width: 315px;
      height: 415px;
      background-color: #fff;
      border-radius: 5px;
      position: relative;

      :deep(.van-cell:after) {
        display: none;
      }

      :deep(.van-cell) {
        padding: 10px 16px !important;
      }

      .label {
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        padding-left: 16px;
      }

      :deep(.van-field__control) {
        background: #F6FAFF !important;
        // height: 40px !important;

      }

      ::placeholder {
        font-size: 14px;
        color: #B8BECA;
      }

      .dates {
        :deep(.van-field__control) {
          height: 40px !important;
        }
      }

      .title {
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
        width: 100%;
        text-align: center;
        margin: 30px 0 20px 0;
      }

      .van-image {
        width: 10px;
        height: 10px;
        position: absolute;
        right: 18px;
        top: 18px;
      }

      :deep(.van-form) {
        min-height: 265px;
      }

      .buttons {
        color: #FFFFFF;
        font-size: 14px;
        width: 285px;
        height: 44px;
        background: #0094FF;
        border-radius: 23px;
        margin: auto;
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }

    }
  }


  .wrappers {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
      width: 315px;
      height: 500px;
      background-color: #fff;
      border-radius: 5px;
      position: relative;
      box-sizing: border-box;
      padding: 0 15px;

      .mechanism_conent {
        width: 285px;
        height: 280px;
        background: linear-gradient(#FBFCFE 0%, #EFF6FF 100%);
        border-radius: 10px;
        margin-top: 15px;
        box-sizing: border-box;
        padding: 20px 15px;

        :deep(.van-cell-group--inset) {
          margin: 0 !important;
          margin-bottom: 20px !important;
          background: transparent !important;
        }

        :deep(.van-cell) {
          padding: 0 !important;
          background: none !important;
          background: transparent !important;
        }

        :deep(.van-field__control) {
          font-weight: 400 !important;
          font-size: 14px !important;
          color: #8492AD !important;

        }

        :deep(.van-field__button) {
          padding-left: 0px !important;
        }

        :deep(.van-field__control) {
          background: transparent !important;
        }

        .mechanism_conent_item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          margin-bottom: 20px;

          .labels {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
          }

          .value {
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
          }
        }
      }

      .close {
        width: 10px;
        height: 10px;
        position: absolute;
        right: 18px;
        top: 18px;
      }

      .column {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;


        .lable {
          font-weight: 400;
          font-size: 14px;
          color: #1A1B1C;

        }

        .value {
          width: 214px;
          height: 36px;
          background: #F2F3F5;
          border-radius: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 400;
          font-size: 14px;
          color: #1A1B1C;
          box-sizing: border-box;
          padding: 0 15px;

          .van-image {
            width: 10px;
            height: 6px;
          }
        }
      }

      :deep(.van-cell:after) {
        display: none;
      }

      .label {
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        padding-left: 16px;
      }

      :deep(.van-field__control) {
        background: #F6FAFF !important;
        // height: 40px !important;

      }

      ::placeholder {
        font-size: 14px;
        color: #B8BECA;
      }

      .dates {
        :deep(.van-field__control) {
          height: 40px !important;
        }
      }

      .title {
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
        width: 100%;
        text-align: center;
        margin: 30px 0 20px 0;
      }



      :deep(.van-form) {
        min-height: 265px;
      }

      .buttons {
        width: 285px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        line-height: 44px;
        position: absolute;
        bottom: 10px;

        .cancel {
          width: 135px;
          height: 44px;
          border-radius: 23px;
          border: 1px solid #0094FF;
          font-weight: 400;
          font-size: 16px;
          color: #0094FF;
        }

        .save {
          width: 135px;
          height: 44px;
          background: #0094FF;
          border-radius: 23px;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
        }
      }

      .describe {
        font-weight: 400;
        font-size: 14px;
        color: #8492AD;
        margin-bottom: 10px;
      }



    }

  }

  .dialog_top {
    width: 100%;
    height: 185px;
    background: url('@/assets/operation/icon_erciquerenbeijing.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;

    .van-image {
      width: 70px;
      height: 70px;
    }

    .title {
      font-weight: 500;
      font-size: 16px;
      color: #1A1B1C;
      text-align: center;
      width: 100%;
      margin-top: 20px;
    }

    .describe {
      font-weight: 400;
      font-size: 14px;
      color: #1A1B1C;
      margin-top: 20px;
    }

  }

  .postscript {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 20px;

    .buttons {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;

      .cancel {
        width: 135px;
        height: 44px;
        border-radius: 23px;
        border: 1px solid #0094FF;
        text-align: center;
        line-height: 44px;
        font-weight: 400;
        font-size: 16px;
        color: #0094FF;
      }

      .submit {
        width: 135px;
        height: 44px;
        border-radius: 23px;
        background: #0094FF;
        text-align: center;
        line-height: 44px;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
      }
    }
  }







  :deep(.van-nav-bar) {
    // background-color: #1466ff;
    height: 46px !important;
    width: 100%;
  }

  :deep(.van-nav-bar__title) {
    color: #000;
  }

  :deep(.van-nav-bar__text) {
    color: #000;
  }

  :deep(.van-icon) {
    color: #000;
  }
}

// 多机制TOP图片
.mechanism_mall {
  position: absolute;
  right: 0;
  top: 35px;
  width: 70px;
  height: 41px;
  background: url("@/assets/newui/details/icon_duojizhi@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

//轮播计数
.hmshop-custom-indicator {
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 30px;
  background: #000000aa;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 30px;
  font-style: normal;
  padding: 0 10px;
}

.text-el {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-10 {
  margin-top: 10px;
}

.b-box {
  box-sizing: border-box;
}

.fl-box-s-b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fl-box {
  display: flex;
}

//浮动导航
.hmshop-floating-nav {
  position: fixed;
  top: 90px;
  display: flex;
  align-items: center;
  background-color: white;
  z-index: 999;
  width: 100%;
  height: 34px;
  align-content: center;
  color: #b8beca;
  box-shadow: 0px 4px 8px 0px rgba(189, 195, 204, 0.5);
  border: 1px solid #F3F3FF;

  ul {
    list-style: none;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;

    li {
      width: 0px;
      flex: 1;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #8492AD;
      line-height: 14px;
      text-align: center;
      font-style: normal;
      text-transform: lowercase;
    }

    .red-text {
      color: #0094FF;
      /* 激活状态下字体变为红色 */
    }
  }
}

.top_loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #00000055;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>